<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">电子邮件：</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br><br>

        <label for="age">年龄：</label>
        <input type="number" id="age" name="age"><br><br>

        <label for="phone">电话号码：</label>
        <input type="tel" id="phone" name="phone"><br><br>

        <input type="submit" value="提交">
    </form>

</body>

<script>

    // JavaScript验证规则

    const validationRules = {
        name: (value) => /^[\u4e00-\u9fa5]+$/.test(value),
        email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
        password: (value) => /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value),
        age: (value) => value >= 18,
        phone: (value) => /^\d{11}$/.test(value)
    };
    // JavaScript验证策略
    const validationStrategies = {
        name: (value) => {
            const valid = validationRules.name(value);
            return {
                valid,
                message: valid ? "" : "姓名只能是汉字"
            };
        },
        email: (value) => {
            const valid = validationRules.email(value);
            return {
                valid,
                message: valid ? "" : "请输入有效的电子邮件地址"
            };
        },
        password: (value) => {
            const valid = validationRules.password(value);
            return {
                valid,
                message: valid ? "" : "密码必须包含至少一个字母和一个数字，长度至少为8个字符"
            };
        },
        age: (value) => {
            const valid = validationRules.age(value);
            return {
                valid,
                message: valid ? "" : "年龄必须大于或等于18岁"
            };
        },
        phone: (value) => {
            const valid = validationRules.phone(value);
            return {
                valid,
                message: valid ? "" : "请输入有效的11位电话号码"
            };
        }
    };
    // JavaScript执行验证规则
    // 这段代码是一个用于验证表单数据的函数 validateForm。
    // 它接收一个包含表单数据的对象 formData 作为参数。

    // 在函数内部，它会遍历 formData 对象的属性。
    // 对于每个属性，它会检查是否存在对应的验证策略 validationStrategies[key]。
    // 如果存在验证策略，则会使用该策略来验证对应的表单字段的值 formData[key]。

    // 验证结果会被封装成一个对象，包含两个属性：valid 表示验证结果是否为真，
    // message 是一个错误消息，如果验证结果为假，则会包含相应的错误提示信息。

    // 最后，将每个字段的验证结果对象存储在 validationResults 数组中，
    // 并返回该数组作为函数的结果。

    // 这段代码的作用是执行表单数据的验证，并将验证结果存储在数组中返回，
    // 以供后续处理和显示错误消息。
    function validateForm(formData) {
        const validationResults = [];

        for (const key in formData) {
            if (formData.hasOwnProperty(key)) {
                const strategy = validationStrategies[key];
                if (strategy) {
                    const result = strategy(formData[key]);
                    validationResults.push(result);
                }
            }
        }

        return validationResults;
    }
    // JavaScript显示错误消息
    function displayErrorMessages(validationResults) {
        // 过滤出所有验证结果为false的结果，并将错误消息映射到一个新的数组中
        const errorMessages = validationResults.filter(result => !result.valid).map(result => result.message);
        // 如果有错误消息，则将其显示为一个警告框
        if (errorMessages.length > 0) {
            alert(errorMessages.join("\n"));
        }
    }
    // JavaScript显示成功消息
    function displaySuccessMessages(validationResults) {
        // 过滤出所有验证结果为true的结果，并将成功消息映射到一个新的数组中
        const successMessages = validationResults.filter(result => result.valid).map(result => result.message);
        // 如果有成功消息，则将其显示为一个警告框
        if (successMessages.length > 0) {
            alert(successMessages.join("\n"));
        }
    }
    // JavaScript处理表单提交
    // 当用户提交表单时，它会阻止表单的默认提交行为，
    // 并获取表单中的各个字段的值。然后它会执行 validateForm 
    // 函数来验证表单数据，并根据验证结果来显示错误消息或成功消息。
    // 如果所有的验证结果都为true，则会提交表单。
    const form = document.querySelector("form");

    form.addEventListener("submit", event => {
        // 阻止了表单的默认提交行为，从而允许我们自定义表单提交的逻辑。
        event.preventDefault();
        // 获取表单数据
        const formData = {
            name: form.elements["name"].value,
            email: form.elements["email"].value,
            password: form.elements["password"].value,
            age: form.elements["age"].value,
            phone: form.elements["phone"].value
        };
        // 执行表单验证，并返回验证结果
        const validationResults = validateForm(formData);
        // 显示错误消息
        displayErrorMessages(validationResults);
        // 如果所有验证结果都为true，则显示成功消息并提交表单
        if (validationResults.every(result => result.valid)) {
            displaySuccessMessages(validationResults);
            form.submit();
        }
    });

</script>

</html>